<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
import { dictItemUpdate, dictItemSave } from '/@/api/sys/dictItem';
const props = defineProps({
  dictId: {
    type: [String, Number]
  }
})
const crudRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  // 标题
  title: '字典项',
  // 列表接口
  api: '/sys/dictItem/page',
  // 添加保存接口
  saveApi: (data)=>{
    return dictItemSave({
      ...data,
      dictId: props.dictId,
    })
  },
  // 添加保存接口
  updateApi: (data) =>{
    return dictItemUpdate({
      ...data,
      dictId: props.dictId,
    })
  },
  // 删除接口
  delApi: '/sys/dictItem/remove',
  // 添加的权限码
  addPerms: 'sys:dictItem:save',
  // 修改的权限码
  editPerms: 'sys:dictItem:update',
  // 查看的权限码
  viewPerms: 'sys:dictItem:detail',
  // 删除的权限码
  delPerms: 'sys:dictItem:remove',
  columns: [
    {
      title: '字典项ID',
      dataIndex: 'id',
      key: 'id',
      list: false,
      view: false,
      add: false,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "hidden",
        maxlength: 20,
      },
      rules: [{ required: false, message: '请输入字典项ID', trigger: 'blur' }]
    },
    {
      title: '字典项名称',
      dataIndex: 'name',
      key: 'name',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "text",
        maxlength: 20,
      },
      rules: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }]
    },
    {
      title: '唯一编码',
      dataIndex: 'code',
      key: 'code',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }]
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Dict',
      componentProps: {
        renderType: "RadioGroup",
        code: "yes_no",
      },
      rules: [{ required: true, message: '请输入是否启用', trigger: 'blur' }]
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'TextArea',
      componentProps: {
      },
      rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]
    },]
    ,
    showSearch: false,
    tableProps: {
      immediate: false,
      beforeFetch(params: any){
        return {
          ...params,
          m_EQ_dictId: props.dictId
        }
      }
    }
})
defineExpose({
  // 获取表格句柄
  getTableRef() {
    return crudRef.value?.getTableRef()
  },
})
</script>
<style lang="less" scoped>

</style>